/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react'
import '../../componentStyle/blogSider.css'
// import { Icon } from 'antd';
import { withRouter } from 'react-router-dom'

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_ac7o2kc4vki.js',
// });

class MenuItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isMouse: false,
            height: 50
        }
    }

    handleMouseOver = () => {
        this.setState({
            isMouse: true
        });
    }

    handleMouseOut = () => {
        this.setState({
            isMouse: false
        });
    }

    handleClick = (index) => {
        // 传递给父组件
        this.props.handleItemData(index);
        // 传递store
        this.props.transfrom_type(index);
        this.props.history.push(`/blog/undefined`);
    }

    render() {
        return (
            <div
                style={{
                    width: 260,
                    height: (this.props.display[this.props.index] ? 47 : 0),
                    backgroundColor: (this.state.isMouse || this.props.isClick[this.props.index] ? '#0099FF' : '#66CCFF'),
                    textAlign: "center",
                    lineHeight: '47px',
                    color: '#fff',
                    borderBottom: (this.props.display[this.props.index] ? '1px solid #6699FF' : 'none'),
                    transitionDuration: '.5s',
                    cursor: 'pointer'
                }}
                onMouseOver={this.handleMouseOver}
                onMouseOut={this.handleMouseOut}
                className="ripple"
                onClick={() => this.handleClick(this.props.index)}
            >
                <div style={{
                    color: '#fff',
                    float: "left",
                    marginLeft: 22,
                    width: 237,
                    textAlign: 'left',
                    height: (this.props.display[this.props.index] ? 47 : 0),
                }}>
                    {this.props.display[this.props.index] ? <span className={`anticon-portal ${this.props.item.icon}`} style={{
                        fontSize: 20,
                        marginRight: 19
                    }}></span> : ""}
                    {this.props.display[this.props.index] ? this.props.item.title : ""}
                </div>
            </div>
        )
    }
}

export default withRouter(MenuItem);